<template>
  <div class="home">
    <el-card>
          <div style="width: 100%; text-align: left;">
            <el-button type="danger" plain @click="delPatchCamera">批量删除</el-button>
            <el-button>摄像头名称：</el-button>
            <el-input v-model="searchModel.cameraName" placeholder="请输入摄像头名称" clearable style="width: 200px;"></el-input>
            <el-button>工区名称：</el-button>
            <el-input v-model="searchModel.orgName" placeholder="请输入工区名称" clearable style="width: 200px;"></el-input>
            <el-button type="primary" plain @click="checkCamera" style="margin-left: 10px;">查询</el-button>
            <el-button type="primary" @click="addCamera" plain>新增</el-button>
          </div>
          <div style="margin-top: 20px;">

            <el-table
                :data="cameraList"
                border
                stripe
                style="width: 100%;height: 600px;"
                @selection-change="delPacthSelectionChange"
            >
              <el-table-column type="selection" min-width="40" />
              <el-table-column label="#" min-width="50">
                <template #default="scope">
                  {{ (searchModel.currentPage-1)*searchModel.pageSize+scope.$index+1 }}
                </template>
              </el-table-column>
              <el-table-column prop="id" label="ID" min-width="50" />
              <el-table-column prop="camera_name" label="摄像头名称" min-width="100" />
              <el-table-column label="播放状态" min-width="85">
                <template #default="scope">
                  <el-tag v-if="scope.row.play_status==1" class="mx-1" size="large" type="success">成功</el-tag>
                  <el-tag v-else class="mx-1" size="large" type="danger">失败</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="org_name" label="工区名称" min-width="100" />
              <el-table-column prop="pull_url" label="推送地址" min-width="150"/>
              <el-table-column prop="video_url" label="视频流地址" min-width="150"/>
              <el-table-column prop="identify_type" label="识别类型" min-width="120"/>
              <el-table-column label="实时识别时间" min-width="120">
                <template #default="scope">
                  <sapn> {{timeTranfer(scope.row.begin_time)}}-{{timeTranfer(scope.row.end_time)}} </sapn>
                </template>
              </el-table-column>
              <el-table-column label="实时识别状态" min-width="120">
                <template #default="scope">
                  <el-switch
                      v-model="scope.row.is_play"
                      class="mt-2"
                      @click="switchIsPlay(scope.row)"
                      active-text="开"
                      inactive-text="关"
                      :active-icon="Check"
                      :inactive-icon="Close"
                  />
                </template>
              </el-table-column>
              <el-table-column label="历史识别时间" min-width="120">
                <template #default="scope">
                  <sapn> {{timeTranfer(scope.row.his_identify_begin_time)}}-{{timeTranfer(scope.row.his_identify_end_time)}}</sapn>
                </template>
              </el-table-column>
              <el-table-column label="历史识别状态" min-width="120" >
                <template #default="scope">
                  <el-switch
                      v-model="scope.row.is_his_play"
                      class="mt-2"
                      @click="switchIsHisPlay(scope.row)"
                      active-text="开"
                      inactive-text="关"
                      :active-icon="Check"
                      :inactive-icon="Close"
                  />
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作" min-width="150">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="editCameraInfo(scope.row)">编辑</el-button>

                  <el-popconfirm
                      title="确认删除？"
                      @confirm="delCameraInfo(scope.row)"
                      confirm-button-text="确认"
                      cancel-button-text="取消"
                  >
                    <template #reference>
                      <el-button type="primary" size="small" >删除</el-button>
                    </template>
                  </el-popconfirm>

<!--                  <el-button type="primary" size="small" @click="checkHistoryStream(scope.row)">历史流</el-button>-->
                </template>
              </el-table-column>

            </el-table>

            <div class="demo-pagination-block" style="margin-top: 10px;">
              <el-pagination
                  v-model:current-page="searchModel.currentPage"
                  v-model:page-size="searchModel.pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :background="true"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>

          </div>

<!--          dialog-->
          <el-dialog v-model="state.addDialogVisible" title="添加摄像头" width="40%" draggable center>
            <el-form :model="state.cameraInfo" label-width="140px">
              <el-form-item label="摄像头代码">
                <el-input v-model="state.cameraInfo.camera_index_code" />
              </el-form-item>
              <el-form-item label="摄像头名称">
                <el-input v-model="state.cameraInfo.camera_name" />
              </el-form-item>

              <el-form-item label="工区名称">
                <el-input v-model="state.cameraInfo.org_name" />
              </el-form-item>
              <el-form-item label="视频流地址">
                <el-input v-model="state.cameraInfo.video_url" />
              </el-form-item>
<!--              <el-form-item label="推送地址">
                <el-input v-model="state.cameraInfo.pull_url" />
              </el-form-item>-->
              <el-form-item label="识别类型">
                <el-select v-model="state.temp_identify_type"
                           multiple
                           placeholder="识别类型"
                           clearable
                           style="width: 100%">
                  <el-option label="安全帽" value="安全帽" />
                  <el-option label="反光衣" value="反光衣" />
                  <el-option label="工作服" value="工作服" />
                </el-select>
              </el-form-item>
              <el-form-item label="实时识别 开始-结束">
                <el-col :span="11">
                  <el-time-picker
                      v-model="state.cameraInfo.begin_time"
                      placeholder="开始时间"
                      style="width: 100%"
                      format="HH:mm"
                      value-format="HH:mm"
                  />
                </el-col>
                <el-col :span="2" class="text-center" style="text-align: center">
                  -
                </el-col>
                <el-col :span="11">
                  <el-time-picker
                      v-model="state.cameraInfo.end_time"
                      placeholder="开始时间"
                      style="width: 100%"
                      format="HH:mm"
                      value-format="HH:mm"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="历史识别 开始-结束">
                <el-col :span="11">
                  <el-time-picker
                      v-model="state.cameraInfo.his_identify_begin_time"
                      type="datetime"
                      style="width: 100%"
                      placeholder="开始时间"
                      format="HH:mm"
                      value-format="HH:mm"
                  />
                </el-col>
                <el-col :span="2" class="text-center" style="text-align: center">
                  -
                </el-col>
                <el-col :span="11">
                  <el-time-picker
                      v-model="state.cameraInfo.his_identify_end_time"
                      type="datetime"
                      style="width: 100%"
                      placeholder="结束时间"
                      format="HH:mm"
                      value-format="HH:mm"
                  />
                </el-col>
              </el-form-item>
<!--              <el-form-item>
                <el-button type="primary" @click="addOnSubmit">Create</el-button>
                <el-button>Cancel</el-button>
              </el-form-item>-->
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="state.addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addOnSubmit">
                  提交
                </el-button>
              </span>
            </template>
          </el-dialog>

      <el-dialog v-model="state.updateDialogVisible" title="编辑摄像头" width="40%" draggable center>
        <el-form :model="state.cameraInfo" label-width="140px">
          <el-form-item label="摄像头代码">
            <el-input v-model="state.cameraInfo.camera_index_code" disabled/>
          </el-form-item>
          <el-form-item label="摄像头名称">
            <el-input v-model="state.cameraInfo.camera_name" />
          </el-form-item>
          <el-form-item label="工区名称">
            <el-input v-model="state.cameraInfo.org_name" />
          </el-form-item>
<!--          <el-form-item label="视频流地址">
            <el-input v-model="state.cameraInfo.video_url" />
          </el-form-item>-->
          <el-form-item label="推送地址">
            <el-input v-model="state.cameraInfo.pull_url" />
          </el-form-item>
          <el-form-item label="识别类型">
            <el-select
                v-model="state.temp_identify_type"
                multiple
                clearable
                placeholder="识别类型"
                style="width: 100%">
              <el-option label="安全帽" value="安全帽" />
              <el-option label="反光衣" value="反光衣" />
              <el-option label="工作服" value="工作服" />
            </el-select>
          </el-form-item>
          <el-form-item label="实时识别 开始-结束">
            <el-col :span="11">
              <el-time-picker
                  v-model="state.cameraInfo.begin_time"
                  placeholder="开始时间"
                  style="width: 100%"
                  format="HH:mm"
                  value-format="HH:mm"
              />
            </el-col>
            <el-col :span="2" class="text-center" style="text-align: center">
              -
            </el-col>
            <el-col :span="11">
              <el-time-picker
                  v-model="state.cameraInfo.end_time"
                  placeholder="开始时间"
                  style="width: 100%"
                  format="HH:mm"
                  value-format="HH:mm"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="历史识别 开始-结束">
            <el-col :span="11">
              <el-time-picker
                  v-model="state.cameraInfo.his_identify_begin_time"
                  type="datetime"
                  style="width: 100%"
                  placeholder="开始时间"
                  format="HH:mm"
                  value-format="HH:mm"
              />
            </el-col>
            <el-col :span="2" class="text-center" style="text-align: center">
              -
            </el-col>
            <el-col :span="11">
              <el-time-picker
                  v-model="state.cameraInfo.his_identify_end_time"
                  type="datetime"
                  style="width: 100%"
                  placeholder="结束时间"
                  format="HH:mm"
                  value-format="HH:mm"
              />
            </el-col>
          </el-form-item>
          <!--              <el-form-item>
                          <el-button type="primary" @click="addOnSubmit">Create</el-button>
                          <el-button>Cancel</el-button>
                        </el-form-item>-->
        </el-form>
        <template #footer>
              <span class="dialog-footer">
                <el-button @click="state.updateDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateOnSubmit">
                  提交
                </el-button>
              </span>
        </template>
      </el-dialog>

    </el-card>

<!--    <el-dialog v-model="state.historyDialogVisible" title="查看历史流" width="40%" draggable center>
      <el-form :model="state.historyCamera" label-width="140px">
        <el-form-item label="摄像头名称" >
          <el-input v-model="state.historyCamera.camera_name" disabled />
        </el-form-item>
        <el-form-item label="识别开始与结束时间">
          <el-col :span="11">
            <el-date-picker
                v-model="state.historyCamera.begin_time"
                type="datetime"
                style="width: 200px"
                placeholder="开始时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYYMMDDHHmmss"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500"> &ensp;&ensp;-</span>
          </el-col>
          <el-col :span="11">
            <el-date-picker
                v-model="state.historyCamera.end_time"
                type="datetime"
                style="width: 200px"
                placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYYMMDDHHmmss"
            />
          </el-col>
        </el-form-item>
      </el-form>
      <template #footer>
              <span class="dialog-footer">
                <el-button @click="state.historyDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="historySubmit">
                  提交
                </el-button>
              </span>
      </template>
    </el-dialog>-->
  </div>
</template>


<script lang="ts" setup>
import { Options, Vue } from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import {ref, getCurrentInstance, toRefs, reactive, onMounted} from "vue";
import {
  getCameraListAPI,
  addCameraInfoAPI,
  delCameraInfoAPI,
  updateCameraInfoAPI,
  historyStreamAPI, switchIsPlayA, switchIsHisPlayA
} from "@/api/cameraapi";
import {CameraListData,SearchModelData,DelPatchListData,CameraListItem} from "@/entityapi/base";
import { ElMessage } from 'element-plus'
import {editStates} from "@/api/modelapi";

const state=reactive({
  //摄像头数据
  cameraList: [] as CameraListData[],//应该是数组类型
  cameraInfo:{
    camera_name:"",
    org_name:"",
    video_url:"",
    pull_url:"",
    identify_type:"",
    begin_time:"",
    end_time:"",
    play_status:"",
    his_identify_begin_time:"",//历史流识别开始时间
    his_identify_end_time:"",//历史流识别结束时间
    is_play:false, //是否实时取流
    is_his_play:false, //是否历史流分析
    camera_index_code:"", //摄像头唯一标识代码
  } as CameraListData,
  cameraInfoNull:{
    camera_name:"",
    org_name:"",
    video_url:"",
    pull_url:"",
    identify_type:"",
    begin_time:"",
    end_time:"",
    play_status:"",
    his_identify_begin_time:"",//历史流识别开始时间
    his_identify_end_time:"",//历史流识别结束时间
    is_play:false, //是否实时取流
    is_his_play:false, //是否历史流分析
    camera_index_code:"", //摄像头唯一标识代码
  } as CameraListData,
  //查询数据
  searchModel: {
    currentPage: 1,
    pageSize:10,
    cameraName: '',
    orgName:''
  } as SearchModelData,
  //总数
  total:0,
  addDialogVisible:false,
  updateDialogVisible:false,
  delPatchListData:{
    delPatchList:[0]
  } as DelPatchListData,
  delPatchList: [0],

  temp_identify_type:[""]
/*  historyDialogVisible:false,
  historyCamera:{
    id:0,
    camera_name:"",
    begin_time:"",
    end_time:"",
  }as CameraListData*/

});

const {
  cameraList,
  searchModel,
  total,
}=toRefs(state)

//应该是开始自动执行的方法
onMounted(() => {
  state.total=1
  //先随便初始化一条数据
  const aaa={
    id:1,
    camera_name:"string",
    org_name:"string",
    video_url:"string",
    pull_url:"string",
    identify_type:"安全帽",
    begin_time:"08:30",
    end_time:"08:22",
    play_status:"成功",
    his_identify_begin_time:"20230823122331",//历史流识别开始时间
    his_identify_end_time:"20230824122312",//历史流识别结束时间
    is_play:false, //是否实时取流
    is_his_play:false, //是否历史流分析
    camera_index_code:"dgsggdgsegsgs", //摄像头唯一标识代码
  }
  const bbb={
    id:21,
    camera_name:"string",
    org_name:"string",
    video_url:"string",
    pull_url:"string",
    identify_type:"安全帽、反光衣",
    begin_time:"08:30",
    end_time:"08:22",
    play_status:"失败",
    his_identify_begin_time:"20230823122331",//历史流识别开始时间
    his_identify_end_time:"20230823122331",//历史流识别结束时间
    is_play:false, //是否实时取流
    is_his_play:false, //是否历史流分析
    camera_index_code:"sfsgsgsgsgsgsd", //摄像头唯一标识代码
  }
  state.cameraList.push(aaa)
  state.cameraList.push(bbb)
  getCameraList()

});
//转时间格式
function timeTranfer(val:string){
  let hour=val.substring(0,2)
  let minutes=val.substring(2,4)
  let timeFinal=hour+":"+minutes
  return timeFinal
}

//数组转换
function arrayToString(val : Array<string>){
  let str=""
  let i=0
  for(i;i<val.length-1;i++){
    str=str+val[i]+"、"
  }
  str=str+val[i]
  return str
}
function stringToArray(val:string){
  return val.split("、")
}

//change pagesize
const handleSizeChange = (val: number) => {
  state.searchModel.pageSize=val
  getCameraList()
}
//当前页
const handleCurrentChange = (val: number) => {
  state.searchModel.currentPage=val
  getCameraList()
}
//获取后端数据
function getCameraList(){
  getCameraListAPI(state.searchModel).then((res:any)=>{
    console.log(res)
    /*for(let i=0;i<res.cameraList.length;i++){
      if(res.cameraList[i].is_play==1){
        res.cameraList[i].is_play=true
      }else {
        res.cameraList[i].is_play=false
      }
      if(res.cameraList[i].is_his_play==1){
        res.cameraList[i].is_his_play=true
      }else {
        res.cameraList[i].is_his_play=false
      }

    }*/
    state.cameraList=res.cameraList
    state.total=res.total
  })
}
//查询
function checkCamera(){
  getCameraList()
}
//add dialog submit
function addOnSubmit(){
  state.cameraInfo.identify_type=arrayToString(state.temp_identify_type)
  addCameraInfoAPI(state.cameraInfo).then((res:any)=> {
    if(res.code==200){
      ElMessage({
        showClose: true,
        message: '添加成功',
        type: 'success',
      })
      getCameraList()
      state.addDialogVisible=false
      state.cameraInfo=state.cameraInfoNull
    }else{
      ElMessage({
        showClose: true,
        message: '添加失败，请重试',
        type: 'error',
      })
    }

  })

}
//add dialog submit
function updateOnSubmit(){
  //console.log(state.cameraInfo.identify_type)
  state.cameraInfo.identify_type=arrayToString(state.temp_identify_type)
  //console.log(state.cameraInfo.identify_type)
  updateCameraInfoAPI(state.cameraInfo).then((res:any)=> {
    if(res.code==200){
      state.updateDialogVisible=false
      state.cameraInfo=state.cameraInfoNull
      ElMessage({
        showClose: true,
        message: '更新成功',
        type: 'success',
      })
      getCameraList()
    }else{
      ElMessage({
        showClose: true,
        message: '更新失败，请重试',
        type: 'error',
      })
    }

  })

}
//编辑
function editCameraInfo(val:CameraListData){
  state.cameraInfo=val
  //state.temp_identify_type.pop()
  state.temp_identify_type=stringToArray(state.cameraInfo.identify_type)
  state.updateDialogVisible=true
}

/*//查看历史流
function checkHistoryStream(val:CameraListData){
  state.historyCamera.camera_name=""
  state.historyCamera.begin_time=""
  state.historyCamera.end_time=""
  state.historyCamera.id=0
  state.historyDialogVisible=true
  console.log(val)
  state.historyCamera.camera_name=val.camera_name
  state.historyCamera.id=val.id

}*/
//提交历史流
/*function historySubmit(){
  historyStreamAPI(state.historyCamera.id,state.historyCamera.begin_time,state.historyCamera.end_time).then((res:any)=>{
    if(res.code==200){
      ElMessage({
        showClose: true,
        message: '获取成功',
        type: 'success',
      })
    }else{
      ElMessage({
        showClose: true,
        message: '获取失败，请重试',
        type: 'error',
      })
    }
  })
  console.log(state.historyCamera)
}*/

//delete
function delCameraInfo(val:CameraListData){
  console.log(val)
  const delPatchList=[]
  delPatchList.push(val.id)
  state.delPatchListData.delPatchList=delPatchList
  delCameraInfoAPI(state.delPatchListData).then((res:any) => {
    console.log(res)
    if(res.code==200){
      ElMessage({
        showClose: true,
        message: '删除成功',
        type: 'success',
      })
      getCameraList()
    }else{
      ElMessage({
        showClose: true,
        message: '删除失败，请重试',
        type: 'error',
      })
    }
  })
}

//批量删除
function delPacthSelectionChange(val:any){
  state.delPatchList=[]
  for(let aa in val){
   // console.log(val[aa].id)
    state.delPatchList.push(val[aa].id)
  }
}
//批量删除
function delPatchCamera(){
  console.log(state.delPatchList)
  state.delPatchListData.delPatchList=state.delPatchList
  delCameraInfoAPI(state.delPatchListData).then((res:any) =>{
    console.log(res)
    if(res.code==200){
      ElMessage({
        showClose: true,
        message: '删除成功',
        type: 'success',
      })
      getCameraList()
    }else{
      ElMessage({
        showClose: true,
        message: '删除失败，请重试',
        type: 'error',
      })
    }
  })
}

function addCamera(){
  state.cameraInfo=state.cameraInfoNull
  state.addDialogVisible=true
  state.temp_identify_type=[]
}
//开启关闭实时流
function switchIsPlay(val:any){
  switchIsPlayA(val.id,val.is_play).then((res:any)=>{
    if(res.code==200){
      ElMessage({
        showClose: true,
        message: '修改成功',
        type: 'success',
      })
      getCameraList()
    }else{
      ElMessage({
        showClose: true,
        message: '修改失败，请重试',
        type: 'error',
      })
    }
  })
}
//开启关闭历史流
function switchIsHisPlay(val:any){
  switchIsHisPlayA(val.id,val.is_his_play).then((res:any)=>{
    if(res.code==200){
      ElMessage({
        showClose: true,
        message: '修改成功',
        type: 'success',
      })
      getCameraList()
    }else{
      ElMessage({
        showClose: true,
        message: '修改失败，请重试',
        type: 'error',
      })
    }
  })
}

</script>
